<template>
    <div class="app-container">
      <div class="flex justify-between">
        <div class="flex flex-wrap">
          <div>
            <span>用户编号：</span>
            <el-input
              v-model="listQuery.user_code"
              class="marginRB10"
              clearable
              placeholder="请输入用户编号"
              style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>用户昵称：</span>
            <el-input
              v-model="listQuery.nickname"
              class="marginRB10"
              clearable
              placeholder="请输入用户昵称"
              style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>开始时间：</span>
            <el-date-picker v-model="listQuery.start_time" class="marginRB10" placeholder="开始时间"
                            type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <div>
            <span>结束时间：</span>
            <el-date-picker v-model="listQuery.end_time" class="marginRB10" placeholder="结束时间"
                            type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="getList"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
  
      <el-table
        ref="dataList"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        row-key="id"
        style="margin-bottom: 20px"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="80" prop="number"></el-table-column>
        <el-table-column label="空投时间" prop="created_time"></el-table-column>
        <el-table-column label="发空投用户ID" prop="user_id"></el-table-column>
        <el-table-column label="发空投用户编号" prop="user_code"></el-table-column>
        <el-table-column label="发空投用户昵称" prop="nickname"></el-table-column>
        <el-table-column label="空投价值（M豆）" prop="coin"></el-table-column>
        <el-table-column label="空投领取人数" prop="have_user"></el-table-column>
        <el-table-column label="退还空投价值（M豆）" prop="return_coin"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleClaimDetails(row)">领取详情</el-button>
            <el-button type="text" @click="handleGiftDetails(row)">礼物详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getList"
      />
    </div>
</template>
  
<script>
  import { listData } from '@/api/box'
  
  export default {
    name: 'welcome',
    data() {
      return {
        confirmBtn: false,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        selectList: [
          { key: undefined, lab: '全部状态' },
          { key: 1, lab: '启用 ' },
          { key: 0, lab: '禁止' }
        ],
        checkedItems: [
          { key: 1, lab: '启用 ' },
          { key: 0, lab: '禁止' }
        ],
        tableData: [],
        dialogFormVisible: false,
        dialogStatus: ''
      }
    },
    created() {
      this.getList()
    },
    methods: {
        indexMethod(index) {
            // 倒序
            return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            // 正序
            // return (this.listQuery.page-1) * this.listQuery.perPage + index +1
        },
      getList() {
        this.listLoading = true
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        listData(this.listQuery).then(({ data }) => {
          this.tableData = data.list
          this.total = data.meta.total
          this.listLoading = false
          this.confirmBtn = false
        })
      },
      handleClaimDetails(row) {
        this.$router.push({
          path: 'claimDetails',
          query: {
              id: row.id
          }
        })
      },
      handleGiftDetails(row) {
        this.$router.push({
          path: 'giftDetails',
          query: {
              id: row.id
          }
        })
      },
      resetForm() {
        this.form = {
          name: undefined
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      },
      resetSubmit() {
        this.listQuery = {
          page: 1,
          perPage: 10
        }
        this.getList()
      },
      onChange() {
      }
    }
  }
  </script>
  